// 饼图
<template>
	<div :id="id" style="height:248px;padding:12px;" />
</template>
<script>
    export default {
        name: 'Annular',
        // eslint-disable-next-line vue/require-prop-types
        props: ['id', 'time'],
        data() {
            return {
                echartData: {},
                echartDataMain: [],
                myCharts: null
            }
            
        },
        mounted() {
            this.drawLine()
            
        },
        methods: {
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById(this.id))
                
                // 绘制图表
                myChart.setOption({
                    backgroundColor: '#f8f8f8',
                    title: {
                        text: '粉丝数波动曲线',
                        left: 16,
                        top: 16,
                        textStyle: {
                            color: '#222',
                            fontSize: 16
                        }
                                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: [{
                            type: 'category',
                            data: ["2019-11-27 00:00", "2019-11-27 04:00", "2019-11-27 08:00", "2019-11-27 12:00", "2019-11-27 16:00", "2019-11-27 20:00", "2019-11-28 00:00", "2019-11-28 04:00", "2019-11-28 08:00", "2019-11-28 12:00", "2019-11-28 16:00", "2019-11-28 20:00", "2019-11-29 00:00", "2019-11-29 04:00", "2019-11-29 08:00", "2019-11-29 12:00", "2019-11-29 16:00", "2019-11-29 20:00", "2019-11-30 00:00", "2019-11-30 04:00", "2019-11-30 08:00", "2019-11-30 12:00", "2019-11-30 16:00", "2019-11-30 20:00", "2019-12-01 00:00", "2019-12-01 04:00", "2019-12-01 08:00", "2019-12-01 12:00", "2019-12-01 16:00", "2019-12-01 20:00", "2019-12-02 00:00", "2019-12-02 04:00", "2019-12-02 08:00", "2019-12-02 12:00", "2019-12-02 16:00", "2019-12-02 20:00", "2019-12-03 00:00", "2019-12-03 04:00", "2019-12-03 08:00", "2019-12-03 12:00", "2019-12-03 16:00", "2019-12-03 20:00", "2019-12-04 00:00", "2019-12-04 04:00", "2019-12-04 08:00", "2019-12-04 12:00", "2019-12-04 16:00", "2019-12-04 20:00", "2019-12-05 00:00", "2019-12-05 04:00", "2019-12-05 08:00", "2019-12-05 12:00", "2019-12-05 16:00", "2019-12-05 20:00", "2019-12-06 00:00"],//此处修改为data.data.follower_count.x_axis_data
                            axisTick: {
                                show: true,
                                lineStyle: {
                                    color: '#008bca'
                                }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#008bca',
                            }
                        },
                        splitLine: {
                            show: false
                        }
                        }],
                        yAxis: [{
                            type: 'value',
                            axisTick: {
                                show: true,
                                lineStyle: {
                                    color: '#008bca'
                                }
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#008bca',
                                }
                            },
                            splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#eee'
                            }
                        },
                        splitArea: {
                            show: true,
                            interval: 1,
                            areaStyle: {
                                color: ['#fff', '#f9f9f9']
                            }
                        },
                        min: function (value) {
                            return value.min - 100
                        }
                    }],
                    series: [{
                        name: '粉丝数',
                        type: 'line',
                        data: [1926365, 1926754, 1926998, 1927434, 1927585, 1927594, 1927687, 1927694, 1927686, 1927658, 1927628, 1927570, 1927498, 1927480, 1927463, 1927439, 1927397, 1927366, 1927310, 1927290, 1927284, 1927275, 1927256, 1927201, 1927102, 1927069, 1927060, 1927039, 1926996, 1926991, 1926927, 1926928, 1926919, 1926928, 1926927, 1926882, 1926828, 1926819, 1926817, 1926860, 1926910, 1926862, 1926803, 1926767, 1926760, 1926766, 1926726, 1926678, 1926536, 1926498, 1926486, 1926442, 1926393, 1926338, 1926233],//此处修改取出data.data.follower_count.series_data数组中value存为一个数组
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: '#34c8c9'
                            }
                        },
                        itemStyle: {
                            opacity: 0
                        },
                        smooth: true
                    }]
                });
            },
            initCharts() {
                this.chart = this.$echarts.init(document.getElementById(this.id))
                this.setOptions()
            },
            setOptions() {
                this.chart.setOption({
                    grid: {
                        top: '20',
                        left: '0',
                        right: '0',
                        bottom: '0',
                        containLabel: true
                    },
                    color: ['#ea9457', '#eddf49', '#55c6ff', '#5ee1cd'],
                    legend: [
                        // 左下第一个圆环图例
                        {
                            icon: 'circle',
                            bottom: 20,
                            // itemGap: 30,
                            textStyle: {
                                width: '50%',
                                color: '#ffffff'
                            },
                            // data: this.echartData.xAxis
                            data: [2, 2]
                        },
                        {
                            icon: 'circle',
                            bottom: 0,
                            textStyle: {
                                width: '50%',
                                color: '#ffffff'
                            },
                            data: [1, 2]
                        }
                    ],

                    series: [
                        // 主要展示层的
                        {
                            radius: ['30%', '60%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            silent: true,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{c}个',
                                    textStyle: {
                                        fontSize: 14
                                    },
                                    position: 'inside'
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false,
                                    length: 30,
                                    length2: 55
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            name: '',
                            data: [1,1]
                        },
                        {
                            radius: '30%',
                            center: ['50%', '50%'],
                            type: 'pie',
                            silent: true,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false,
                                    length: 30,
                                    length2: 55
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            name: '',
                            data: [1,1]
                        }, // 边框的设置
                        {
                            radius: '30%',
                            //  radius: ['30%', '40%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            zlevel: 3,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            animation: false,
                            tooltip: {
                                show: false
                            },
                            data: [
                                {
                                    value: 1,
                                    itemStyle: {
                                        color: 'rgba(0,0,0,0.3)'
                                    }
                                }
                            ]
                        }
                    ]
                })
            }
        }
    }
</script>
